<template>
    <div :id="id" class="box"></div>
</template>
<script>
export default {
    name: 'myChart',
    props:["data","id"],
    data () {
        return {
            myChart:""
        }
    },
    methods:{
        init(){
            this.myChart = this.$echarts.init(document.getElementById(this.id));
            this.myChart.setOption({
                tooltip: {
                    trigger: "item",
                    formatter: "{b} : {c} ({d}%)",
                },
                // legend: {
                //   // orient: "vertical",
                //   // bottom: "bottom",
                //   data: this.clonm,
                // },
                color:['#75B6E4','#90EC7D','#46454A'],
                series: [
                    {
                        // name: "访问来源",
                        type: "pie",
                        radius: "70%",
                        label: {
                        normal: {
                            position: "inner",
                            show: false,
                        },
                        },
                        center: ["45%", "45%"],
                        data: this.data?this.data:[],
                        itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: "rgba(0, 0, 0, 0.5)",
                         },
                        },
                    },
                ],
            });
        }
    },
    mounted(){
       
        this.init();
    },
    //销毁组件
    destroyed(){
        this.myChart = "";
    }
}
</script>
<style>
    .box{
        height: 100%;
        width: 100%;
    }
</style>